<div class="vt-toolbar vt-padding">
  <md-icon *ngIf="featuresService.showTopologyCRUD" class="vt-menu" (click)="menuCrud.toggle($event)">menu</md-icon>
  <p-menu #menuCrud popup="popup" [model]="actionsCrud"></p-menu>
  <md-icon *ngIf="!featuresService.showTopologyCRUD" class="vt-menu" (click)="menu.toggle($event)">menu</md-icon>
  <p-menu #menu popup="popup" [model]="actions"></p-menu>
  <h1 class="vt-title">Keyspaces</h1>
  <md-icon class="vt-right-menu" (click)="getKeyspaces()" [disabled]="inFlightQueries > 0">refresh</md-icon>
</div>
<div>
  <div *ngFor="let keyspace of keyspaces" class="vt-card">
    <md-card>
      <div>
        <div class="vt-card-toolbar">
          <md-icon *ngIf="featuresService.showTopologyCRUD" class="vt-menu" (click)="setSelectedKeyspace(keyspace);cardMenu.toggle($event)">menu</md-icon>
          <p-menu #cardMenu popup="popup" [model]="keyspaceActions"></p-menu>
          <h2 id="{{keyspace.name}}" class="vt-title vt-keyspace-card">{{keyspace.name}}</h2>
        </div>
      </div>
      <a class="vt-dark-link" [routerLink]="['/keyspace']" [queryParams]="{keyspace: keyspace.name}">
        <md-card-content >
          <div class="stats-container">
            <md-list>
              <md-list-item>
                <span class="vt-shard-stats">
                    {{keyspace.servingShards.length}} Shards
                  <div style="color: red" *ngIf="keyspace.nonservingShards.length > 0">
                    (+{{keyspace.nonservingShards.length}} Not serving)
                  </div>
                </span>
              </md-list-item>
            </md-list>
          </div>
        </md-card-content>
      </a>
    </md-card>
  </div>
</div>
<p-dialog [(header)]="dialogSettings.dialogTitle" [(visible)]="dialogSettings.open" draggable="" resizable="" width="800">
  <vt-dialog [(dialogContent)]="dialogContent" [(dialogSettings)]="dialogSettings"></vt-dialog>
</p-dialog>
<div *ngIf="dialogSettings.open" class="vt-popUpContainer" >
</div>
